<template>
  <div class="logo">
    <router-link :to="{ name: 'dashboard' }" id="logoBox">

      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <div v-if="navTheme === 'dark'" class="logo-white"></div>
      <div v-else class="logo-img"></div>
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->

      <!-- <h1 v-if="showTitle">运管平台<i></i><span>{{ title }}</span></h1> -->
      <h1 v-show="showTitle" :class="navTheme === 'dark' ? 'dark-title' : ''">数据指标管理平台</h1>
    </router-link>
  </div>
</template>

<script>
import { mixin } from '@/utils/mixin.js'
// TODO: 监听logo的宽度变化，低于xx时隐藏标题
export default {
  name: 'Logo',
  mixins: [mixin],
  props: {
    title: {
      type: String,
      default: '态势中心',
      required: false
    },
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
/*缩小首页布 局顶部的高度*/
@height: 64px;

.sider {
  box-shadow: none !important;

  .logo {
    height: @height !important;
    line-height: @height !important;
    box-shadow: none !important;
    transition: background 300ms;
    background: #001529;
    padding: 0 0px;
    // margin-left: 208px;

    .router-link-active {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;


      .dark-title {
        // width: 140px;
        font-size: 16px;
        line-height: 22px;
        margin-left: 6px;
        padding: 10px 0;
        // text-align: center;
      }
    }

    a {
      color: white;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }

      &>img {
        height: 26px;
      }

      .logo-white {
        width: 28px;
        height: 28px;
        background: url('~@/assets/logo-white.png') no-repeat center;
        background-size: 100% 100%;
        float: left;
        background-size: 28px 28px;
      }

      .logo {
        width: 59px;
        height: 26px;
        background: url('~@/assets/logo.png') no-repeat center;
        float: left;
        background-size: 34px 31px;
      }
    }
  }

  &.light .logo {
    background-color: @primary-color;
  }
}
</style>
